<template>
  <div class="box">
    <div class="btop">
      <div class="bt1">{{ detail.symbolName }} {{ $t("common.yongxu") }}</div>
      <div class="bt2">{{ detail.createTime }}</div>
    </div>
    <div class="chexiao" @click="backoutOne">{{ $t("common.chexiao") }}</div>
    <div class="bfont1" :class="detail.side == '多' ? 'green' : 'red'">
      {{
        detail.type == "限价单" ? $t("long.xianjiadan") : $t("long.shijiadan")
      }}/{{ detail.operationType == "开" ? $t("long.kai") : $t("long.ping")
      }}{{ detail.side == "多" ? $t("long.duo") : $t("long.kong") }}
    </div>
    <div class="ubox">
      <div class="uli">
        <div class="uli1">
          {{ $t("long.weituojiage") }}({{ detail.mainCurName }})
        </div>
        <div class="uli2">{{ $formatMoney(detail.price, 2) }}</div>
      </div>
      <div class="uli">
        <div class="uli1">
          {{ $t("long.weituoshuliang") }}({{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }})
        </div>
        <div class="uli2">
          {{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.num
                : $formatMoney(detail.currencyNum, 2)
              :  $formatMoney(parseInt(detail.num * detail.sheet),11)
          }}
        </div>
      </div>
      <div class="uli">
        <div class="uli1">
          {{ $t("long.chengjiaoshuliang") }}({{
            curyType == "token" ? detail.tokenCurName : detail.mainCurName
          }})
        </div>
        <div class="uli2">
          {{
            curyType == "token" ? detail.dealNum : detail.currencyDealNum || 0
          }}
        </div>
      </div>
      <div class="uli">
        <div class="uli1">
          {{ $t("long.chengjiaojunjia") }}({{ detail.mainCurName }})
        </div>
        <div class="uli2">
          {{ detail.dealAvg ? $formatMoney(detail.dealAvg, 2) || "0" : "0" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["detail", "curyType"],
  data() {
    return {
      backoutShow: false,
    };
  },
  methods: {
    async backoutOne() {
      this.$emit("backoutOne", {
        id: this.detail.id,
        type: "order",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 3vw;
  position: relative;
  .chexiao {
    padding: 1.4vw 3vw 1.3vw;
    background-color: #171A2B;
    color: #d6d6d6;
    font-size: 2.8vw;
    border-radius: 2px;
    position: absolute;
    bottom: 4vw;
    right: 3vw;
  }
  .btop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bt1 {
      font-size: 4vw;
      color: #fff;
    }
    .bt2 {
      font-size: 3.2vw;
      color: #8992AE;
    }
  }
  .bfont1 {
    font-size: 3.2vw;
    color: #5eba89;
    text-align: left;
    margin: 2vw 0 3vw;
  }
  .ubox {
    .uli {
      display: flex;
      align-items: center;
      height: 6.4vw;
      .uli1 {
        font-size: 3.2vw;
        color: #8992AE;
        margin-right: 2vw;
      }
      .uli2 {
        font-size: 3.2vw;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
</style>